Event Template Editor - User Interface Layout Tab
The UI tab allows you to arrange the display your users will see when running the event. All relevant components with UI representation will be displayed on this tab so you can get a preview of what the participants will actually see when they are interacting with this template.
There are two primary modes:
- Auto Layout
- Manual Layout
To swap between Auto & Manual layouts simply check/un-check the Auto Layout checkbox in the Layout Management portion of the UI.
Auto Layout
The automatic layout will use a responsive web design (RWD) to display all your components in a linear fashion. This mode has two primary advantages. First it requires minimal work on your part, what you see is what you get. You don't have much control over the arrangement other than being able to resize some of the components. Secondly it will handle all the different screen resolutions users may run the event on, from a huge display in the lab to a small mobile device. The downside is you have no real control or say in how the layout is arranged. You cannot optimize the Event by grouping things together, resizing individual components and so forth.
The Auto Layout works by laying out horizontal rows of component types. If there are more instances of a type then fit in the row then it wraps down to the next line and continues in this fashion until all instances of a given type have been displayed. At that point it moves on to the next component type. The order in which components are displayed is:
- Meta Items
- Manual Triggers
- Progress Bars
- Timers
- Labels
- Images
This results in a UI similar to the below, Meta Items are displayed in a row followed by Manual Triggers and so forth.
If the horizontal resolution of the screen were to shrink then the UI controls would wrap onto into a new row, as seen below.
Note that 2 of the Meta Items and 2 of the Manual Triggers exceeded the horizontal width of the UI and thus were placed into a new row. The smaller your horizontal resolution the more rows you would potentially have.
This may cause a vertical scroll bar to appear if you start to exceed your vertical resolution as well!
This is a very convenient way of displaying things, however it has it's issues. For instance many of the components are to small to support their contents. Taking a look at the Demo Manual Trigger 01 Manual Trigger you can see the "01" part of its Label has wrapped as well. To resolve this SCS allows you to set a width and height for three of the major UI components when in Auto Mode.
Increasing the widths of Meta Items to 40 pixels and the width of Manual Triggers to 24 results in a much cleaner UI. Each Meta Item Label is aligned to the left of it's value, each Manual Trigger is displayed without internal wrapping and each Label is displayed where it's Label Position setting indicates it should be.
Changes to the width and/or height values in Auto Mode effect all components of the given type. You cannot apply width/height values to a single item.
However, even though this looks better it may still not be ideal. Perhaps you want to put Manual Triggers next to the Meta Items that they update. Perhaps you don't want your Images or Labels down at the bottom of the screen but next to or inline with other related components. Perhaps you want one button to be larger than the others. For this and many other reasons Events also have a manual layout mode.
Manual Layout
The manual layout users a similar pattern as the primary SCS Layout page. You are presented with a grid upon which you can manually resize and move all components for your UI. You have fine grain control of how things are arranged on the screen, however this is not a responsive pattern and requires some initial involvement on your part to get it setup in a manner which makes sense.
When laying out in Manual Mode each element with a UI representation is added to the screen on top of a grid wrapped in a dotted box. You can use your mouse to click and drag the component anywhere inside the grid. In the lower right corner of each box is a handle which you can grab to resize the wrapper. Depending on the type of component you are resizing and it's settings (such as the Labels Position property) the component will resize and restructure to fill the space you have defined.
The Manual Layout Mode allows you to create a much more customized display, as seen below for instance. The downside is you have to lay it out manually so initially it takes a few moments to get things where you want them. It also saves the sizes and positions as hard numbers which disables the responsive aspects of the Auto Mode.
